<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-29 11:10:25
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-01 22:17:42
 * @FilePath: \guanggu_traffic\src\components\public\UserInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<el-sub-menu index="3" :popper-offset="8" class="menu">
		<template #title>用户名{{ userData.username }}</template>
		<el-menu-item
			index="3-1"
			@click="openUserListdailog"
			v-if="userData.type === 'admin'"
		>
			用户管理
		</el-menu-item>
		<el-menu-item index="3-2" @click="handleBack">
			<!--  -->
			退出登录
		</el-menu-item>
	</el-sub-menu>
	<!-- 用户列表弹窗 -->
	<UserListDialog ref="userListDialog"></UserListDialog>
</template>

<script setup>
import { ref } from 'vue'
import { useUserDataStore } from '@/stores/user'
import { logoutHttp } from '@/request/request'
import UserListDialog from '@/views/admin/components/UserListDialog.vue'
const {userData} = useUserDataStore()
console.log('userData', userData)
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter()
//用户列表状态
const userListDialog = ref(null)
const openUserListdailog = () => {
	userListDialog.value.handleOpen()
}
//退出登录
const handleBack = async () => {
	let res = await logoutHttp({
		username: userData.username,
		type: userData.type,
	})
	if (res.code === 200) {
		router.push({
			path: '/login',
		})
		localStorage.remove('token')
	} else {
		ElMessage.error(res.error)
	}
}
</script>

<style lang="scss" scoped>
.menu {
	position: fixed;
	right: 0;
}
</style>
